<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>鼠标hover特效</title>
  <style type="text/css">
    body {
      color: #fff;
      background: #000;
    }

    h1 {
      font-size: 14px;
      font-family: "Microsoft Yahei";
      text-align: center;
    }

    .change {
      display: block;
      width: 400px;
      height: 400px;
      background: url(http://p3.qhimg.com/t0134c65e59012a1257.png) no-repeat center;
      background-size: cover;
      border: 1em solid rgba(255, 255, 255, .8);
      margin: 50px auto;
    }

    .change img {
      display: block;
      width: 300px;
      height: 284px;
      opacity: 0;
      -webkit-transform: translate(-100px, -100px);
      -webkit-transition: opacity 1s ease-in-out 0.5s, -webkit-transform 1s ease-in-out;
      transition: opacity 1s ease-in-out 0.5s, transform 1s ease-in-out;
    }

    .change:hover img {
      -webkit-transform: translate(0px, 0px);
      opacity: 1;
      -webkit-transition: opacity 1s ease-in-out, -webkit-transform 1s ease-in-out .1s;
      transition: opacity 1s ease-in-out, transform 1s ease-in-out .1s;
    }
  </style>
</head>
<body>
<h1>请使用webkit内核标准浏览器查看效果</h1>
<a href="http://image.haosou.com/i?q=%E5%AB%A6%E5%A8%A5png&src=tab_www" class="change " target="_blank">
  <img src="t0160e6a92121691e22.png" alt=""/>
</a>
</body>
</html>
